<template>
  <div class="about">
    <el-card class="box-cardAdd">
      <div style="text-align: left">
        <a  style="color: #409EFF;vertical-align: 5px;" class="el-icon-edit">
          组卷配置</a>
        <i class="el-icon-arrow-right"></i>
        <a  style="color: #9999;vertical-align: 5px;pointer-events:none" class="el-icon-lock">
          考试权限</a>
        <i class="el-icon-arrow-right"></i>
        <a  style="color: #9999;vertical-align: 5px;pointer-events:none" class="el-icon-setting">
          补充配置</a>
      </div>
    </el-card>
    <div style="text-align: right;margin: 10px 0">
      <el-button type="primary" style="float: left" @click="goBack()">上一步</el-button>
      <el-button type="primary" @click="goNext()">下一步</el-button>
    </div>
    <div>
      <el-card>
        <template>
          <div style="text-align: left">
            <el-radio v-model="redio1" label="1" border size="medium"  style="margin: 10px 0 0 10px">题库组卷</el-radio>
            <el-radio v-model="redio1" label="2" border size="medium" >自由组卷</el-radio>
          </div>
        </template>
        <el-card style="margin: 0px 10px;font-size: 12px;text-align: left">
          <el-button style="margin: 10px 15px" type="primary" size="small" @click="addQuestionByBankId()"><i class="el-icon-plus" style="margin: 0 10px 0 0;font-size: 12px"></i>添加题目</el-button>
          <span style="float: right;margin:10px 80px;font-size: 16px">总分: <span>{{examAddNew.totalScore}}</span></span>
          <el-table :data="examAddNew.questions" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" :border="true">
            <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
            <el-table-column prop="quContent" label="题目内容" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="quType" label="题目类型" width="180" align="center">
              <template slot-scope="scope">
                {{questionType[scope.row.quType]}}
              </template>
            </el-table-column>
            <el-table-column label="单题分数" width="180px" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.level" type="number" @change="updateScore()"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="操作" width="180px" align="center">
              <template slot-scope="scope">
                <el-button type="danger" @click="deleteByQuestion(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-card>
<!--  根据题库选择试题    -->
      <el-dialog title="请选择题库" :visible.sync="addQuestionDialog" width="450px" >
        <el-form :label-width="formLabelWidth" align="left" style="margin: -10px 0 -20px 0">
          <el-form-item label="题库名称" >
            <el-select v-model="bankId" :value="bankId" placeholder="请选择题库">
              <el-option v-for="item in bankArr" :label="item.bankName" :value="item.bankId" :key="item.bankId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="addQuestionDialog = false">取 消</el-button>
          <el-button type="primary" @click="goQuestionAdd()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      examAddNew:{
        examName:'',
        examDesc:'',
        type:'',
        password:'',
        //考试时间
        duration:'',
        //开始时间
        starTimeStr:'',
        endTimeStr:'',
        //总分
        totalScore:'',
        //及格线
        passScore:0,

        majorId:'',
        majorName:'',

        classIds:'',

        classNames:'',

        questions:[]
      },
      questions:[],
      /*选择题库组卷时的数组*/
      bankArr:[],
      questionType:["","单选题","多选题","判断题","简答题"],
      bankId:'',
      addQuestionDialog:false,
      formLabelWidth:'120px',
      AddBankId:0,
      redio1:'1',
      /*总分*/
      sumScore:0,
    }
  },
  methods:{
    updateScore(){
      localStorage.setItem("questions",JSON.stringify(this.examAddNew.questions));
      this.LoadLocalQuestion();
    },
    //根据id删除数据
    deleteByQuestion(index){
      console.log(this.examAddNew.questions)
      console.log(index)
      this.examAddNew.questions.splice(index,1);
      localStorage.setItem("questions",JSON.stringify(this.examAddNew.questions));
      this.LoadLocalQuestion();
    },
    goQuestionAdd(){
      localStorage.setItem("bankId",this.bankId);
      localStorage.setItem("redio1",this.redio1)
      this.addQuestionDialog=false;
      this.$router.push('/exam/addNew1-SelectQuestion');
    },
    goBack(){
      this.$router.push('/exam');
    },
    goNext(){
      console.log(this.examAddNew)
      localStorage.setItem("questions",JSON.stringify(this.examAddNew.questions));
      let examAddNew = JSON.stringify(this.examAddNew);
      localStorage.setItem("examAddNew",examAddNew)
      this.$router.push('/exam/addNew2');
    },
    addQuestionByBankId(){
      console.log(this.redio1)
      if(this.redio1=='2'){
        localStorage.setItem("redio1",this.redio1)
        localStorage.setItem("bankId",null);
        this.$router.push('/exam/addNew1-SelectQuestion');
      }else {
        let url = "http://localhost:9282/bank/list?page=1&IsAll=all";
        let jwt = localStorage.getItem("localJwt");
        this.axios
            .create({
              'headers': {
                'Authorization': jwt
              }
            })
            .get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.bankArr = jsonResult.data.list;
            this.addQuestionDialog = true;
            if (jsonResult.jwt!=null){
              localStorage.setItem("localJwt",jsonResult.jwt);
            }
          }else if(jsonResult.state==70100){
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
            this.$router.push('/')
          }  else {
            this.$alert(jsonResult.message, "错误", {
              confirmButtonText: '确定',
              callback: action => {
                console.log(action)
                this.getNoticeArr()
              }
            })
          }
        })
      }
    },
    LoadLocalQuestion(){
      let questions = localStorage.getItem("questions");
      if(questions==null){
        return;
      }
      questions = JSON.parse(questions);
      this.examAddNew.questions = questions;
      this.examAddNew.totalScore = 0;
      for (let i = 0; i < questions.length; i++) {
          this.examAddNew.totalScore =this.examAddNew.totalScore*1+ questions[i].level*1;
      }
      console.log(this.examAddNew.totalScore)
    }
  },
  mounted() {
    this.LoadLocalQuestion();
  }
}
</script>
<style>
.box-cardAdd .el-card__body{
  padding: 0;
}
.box-cardAdd .el-card__body a{
  text-decoration: none;
  cursor:pointer;
  margin:0 140px;
  vertical-align: 5px;
  font-size: 14px;
  font-weight: bold;
}
.box-cardAdd .el-card__body i{
  text-decoration: none;
  cursor:pointer;
  margin:0 140px;
  font-size: 14px;
  font-weight: bold;
}
.box-cardAdd .el-card__body i{
  font-size: 32px;
  padding: 0;
  margin:0;
  color: #8492a6
}
</style>
